import React, { Component } from 'react'
import { Table } from 'antd'
import { connect } from 'dva';
import { UmiComponentProps, BaseComponentProps } from '@/common/type';
import { checkInit } from '@/utils/util';

interface P {
  data?: {
    list: Array<any>;
    total: number;
  };
  cond: any;
}

type Props = P & UmiComponentProps & BaseComponentProps;

@connect(({ download, loading }) => ({
  data: download.list || {},
  loading: loading.effects['download/queryPage'],
}))
class Download extends Component<Props> {

  state = {
    current: 1
  }

  componentDidMount() {
    const { dispatch } = this.props;
    checkInit() ? dispatch({ type: `download/initCond` }) : this.queryData(1)
  }

  private queryData(offset = 1) {
    const { dispatch } = this.props;
    dispatch({
      type: 'download/queryPage',
      payload: {
        pageNum: offset,
      },
    });
  }


  private onShowSizeChange = (current, pageSize) => {
    const { dispatch, cond } = this.props;
    cond.pageSize = pageSize;
    dispatch({ type: 'download/updateCond', payload: cond })
  }

  render() {

    const { data } = this.props;
    const { total, list } = data;
    
    const columns = [
      {
        title: '序号',
        dataIndex: 'idNum',
        key: 'idNum',
        render: (text, record, index) => index+1 < 10 ? `0${index+1}` : index+1
      },
      {
        title: '模板名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '操作', key: 'x', render: (record) => {
          return (
            <a>
              {
                record.contentLink ? <a style={{ 'marginLeft': '10px' }} target="_blank" rel="资源链接" href={`${record.contentLink}`}>下载</a> : '暂无资源'
              }
            </a>
          )
        }
      }
    ];

    const pagination = {
      total,
      showTotal: (total: number) => `共 ${total} 条`,
      current: this.state.current,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      showSizeChanger: true,
      onChange: (current: number) => {
        this.setState({ current }, () => this.queryData(current));
      },
    };

    return (
      <>
        <Table
          style={{ marginTop: '30px' }}
          columns={columns}
          dataSource={list || []}
          loading={this.props.loading}
          rowKey="id"
          pagination={pagination}
          bordered
        />
      </>
    )
  }
}

export default Download;